<div class='row' id='content-wrapper'>
            <div class='col-xs-12 wigetdrapdrop'>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='page-header'>
                    <h1 class='pull-left'>
                      <i class='icon-font'></i>
                      <span>Typography</span>
                    </h1>
                    <div class='pull-right'>
                      <ul class='breadcrumb'>
                        <li>
                          <a href='index.html'>
                            <i class='icon-bar-chart'></i>
                          </a>
                        </li>
                        <li class='separator'>
                          <i class='icon-angle-right'></i>
                        </li>
                        <li class='active'>Typography</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-font'></i>
                        Headings and paragraphs
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content'>
                      <h1>Heading 1</h1>
                      <p class='lead'>Nulla semper laoreet magna nec viverra. Nulla facilisi. Vestibulum vitae nisl a felis porttitor tempor.</p>
                      <hr class='hr-normal'>
                      <h2>Heading 2</h2>
                      The following snippet of text is
                      <strong>rendered as bold text.</strong>
                      <hr class='hr-normal'>
                      <h3>Heading 3</h3>
                      The following snippet of text is
                      <i>rendered as italicized text.</i>
                      <hr class='hr-normal'>
                      <h4>Heading 4</h4>
                      Nulla semper laoreet magna nec viverra. Nulla facilisi. Vestibulum vitae nisl a felis porttitor tempor. In hac habitasse platea dictumst. Aenean dapibus pretium ipsum nec pharetra. Ut purus ligula, placerat eu rhoncus rhoncus, egestas a velit. Fusce eget vehicula velit. Nunc nec augue pellentesque nisl adipiscing pharetra.
                      <hr class='hr-normal'>
                      <h5>Heading 5</h5>
                      <div class='text-green'>Nulla semper laoreet magna nec viverra. Nulla facilisi. Vestibulum vitae nisl a felis porttitor tempor. In hac habitasse platea dictumst. Aenean dapibus pretium ipsum nec pharetra. Ut purus ligula, placerat eu rhoncus rhoncus, egestas a velit. Fusce eget vehicula velit. Nunc nec augue pellentesque nisl adipiscing pharetra.</div>
                      <hr class='hr-normal'>
                      <h6>Heading 6</h6>
                      <small class='text-red'>Small text in red color.</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-list'></i>
                        Lists
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content'>
                      <div class='row'>
                        <div class='col-sm-3'>
                          <h4>Unordered</h4>
                          <ul>
                            <li>Lorem ipsum</li>
                            <li>Lorem ipsum</li>
                            <li>Lorem ipsum</li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <h4>Ordered</h4>
                          <ol>
                            <li>Lorem ipsum</li>
                            <li>Lorem ipsum</li>
                            <li>Lorem ipsum</li>
                          </ol>
                        </div>
                        <div class='col-sm-3'>
                          <h4>Unstyled</h4>
                          <ul class='list-unstyled'>
                            <li>Lorem ipsum</li>
                            <li>Lorem ipsum</li>
                            <li>Lorem ipsum</li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <h4>With icons</h4>
                          <ul class='list-unstyled'>
                            <li>
                              <i class='icon-random text-purple'></i>
                              Lorem ipsum
                            </li>
                            <li>
                              <i class='icon-beaker text-green'></i>
                              Lorem ipsum
                            </li>
                            <li>
                              <i class='icon-ambulance text-red'></i>
                              Lorem ipsum
                            </li>
                          </ul>
                        </div>
                      </div>
                      <hr class='hr-normal'>
                      <div class='row'>
                        <div class='col-sm-6'>
                          <h4>Inline</h4>
                          <ul class='list-unstyled list-inline'>
                            <li>Lorem ipsum</li>
                            <li>Lorem ipsum</li>
                            <li>Lorem ipsum</li>
                          </ul>
                        </div>
                        <div class='col-sm-6'>
                          <h4>Inline with icons</h4>
                          <ul class='list-unstyled list-inline'>
                            <li>
                              <i class='icon-tag'></i>
                              Lorem ipsum
                            </li>
                            <li>
                              <i class='icon-circle-blank'></i>
                              Lorem ipsum
                            </li>
                            <li>
                              <i class='icon-barcode'></i>
                              Lorem ipsum
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-adjust'></i>
                        Address & blockquote
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content'>
                      <div class='row'>
                        <div class='col-sm-6'>
                          <address>
                            <strong>Twitter, Inc.</strong>
                            <br>
                            795 Folsom Ave, Suite 600
                            <br>
                            San Francisco, CA 94107
                            <br>
                            <abbr title='Phone'>P:</abbr>
                            (123) 456-7890
                          </address>
                          <address style='margin-bottom: 0;'>
                            <strong>Full Name</strong>
                            <br>
                            <a href='mailto:#'>first.last@example.com</a>
                          </address>
                        </div>
                        <div class='col-sm-6'>
                          <blockquote>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                            <small>
                              Someone famous
                              <cite title='Source Title'>Source Title</cite>
                            </small>
                          </blockquote>
                          <blockquote class='pull-right' style='margin-bottom: 0;'>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                            <small>
                              Someone famous
                              <cite title='Source Title'>Source Title</cite>
                            </small>
                          </blockquote>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-cog'></i>
                        Code
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content'>
                      <h4>Inline</h4>
                      Lorem ipsum
                      <code>dolor</code>
                      sit amet.
                      <hr class='hr-normal'>
                      <h4>Block</h4>
                      <pre>Nulla semper laoreet magna nec viverra. Nulla facilisi. Vestibulum vitae nisl a felis porttitor tempor. In hac habitasse platea dictumst. Aenean dapibus pretium ipsum nec pharetra. Ut purus ligula, placerat eu rhoncus rhoncus, egestas a velit. Fusce eget vehicula velit. Nunc nec augue pellentesque nisl adipiscing pharetra.</pre>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-align-left'></i>
                        Aligment
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content'>
                      <div class='text-left'>Text aligned left</div>
                      <div class='text-center'>Text aligned center</div>
                      <div class='text-right'>Text aligned right</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-adjust'></i>
                        Emphasis
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content'>
                      <p class='text-muted'>Lorem ipsum dolor sit amet</p>
                      <p class='text-warning'>Lorem ipsum dolor sit amet</p>
                      <p class='text-error'>Lorem ipsum dolor sit amet</p>
                      <p class='text-info'>Lorem ipsum dolor sit amet</p>
                      <p class='text-success'>Lorem ipsum dolor sit amet</p>
                    </div>
                  </div>
                </div>
              </div>
